<template>
	<view class="search_box">
		<view class="search">
			<view class="search_input flex_ac_js" style="font-size: 28rpx;">
				<view class="flex_ac">
					<uni-icons type="search" color="#808080" size="20" />
					<input :value="inputValue" placeholder="搜索" @input="handleInput" @focus="handleFocus" style="margin-left: 20rpx;" />
				</view>
				<uni-icons type="clear" size="24" color="#808080" v-if="showClearIcon" @click="clearIcon"></uni-icons>
			</view>
		</view>
		<view class="history" v-if="showHistory">
			<block v-if="historyWordList.length > 0">
				<view class="title flex_ac_js">
					<text>搜索历史</text>
					<view class="del">
						<uni-icons type="trash" size="20" color="#808080" @tap="showDeleteIcon = !showDeleteIcon" v-show="showDeleteIcon"></uni-icons>
						<text v-show="!showDeleteIcon" style="margin-right: 20rpx;" @tap="deleteAll">全部删除</text>
						<text v-show="!showDeleteIcon" @tap="showDeleteIcon = !showDeleteIcon">完成</text>
					</view>
				</view>
				<view class="history_word flex_ac_js">
					<view class="item_his" v-for="(item, index) in historyWordList" :key="item.id" @tap="goToPage('/pages/wordDetails/wordDetails?type=' +  'search' + '&id=' + item.id)">
						{{ item.searchinfo }}
						<uni-icons type="closeempty" size="16" color="#96a6b3" @tap.stop="deleteIcon(item.id)" v-show="!showDeleteIcon" class="del_icon"></uni-icons>
					</view>
				</view>
			</block>
			<emptyState :len="historyWordList.length" :msg="'暂无搜索记录'" :padding-num="'80rpx 0'"></emptyState>
		</view>
		<view class="history" v-if="!showHistory">
			<scroll-view scroll-y style="height: 100%;">
				<view class="new_word">
					<view class="item_search flex_ac_js" v-for="item in newWordList" :key="item.id" @tap="searchBtn(item.word, item.id)">
						<text class="title1">{{ item.word }}</text>
						<text class="title2">{{ item.annotation }}</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { searchWords, searchWord, searchHistory, deleteHistory } from '@/api/homes/search/search.js'
	export default {
		data() {
			return {
				showHistory: true,
				inputValue: '',
				showClearIcon: false,
				showDeleteIcon: true,
				historyWordList: [],
				newWordList: []
			}
		},
		onLoad() {
			this.historyWord()
		},
		methods: {
			async searchBtn(name, id) {
				const { data } = await searchWord(name)
				this.goToPage('/pages/wordDetails/wordDetails?type=' + 'search' + '&id=' + id)
			},
			deleteAll() {
				let that = this
				
				uni.showModal({
					title: '温馨提示',
					content: '确认要清空搜索历史记录吗',
					success(res) {
						if (res.confirm) {
							let id = that.historyWordList.map(item => item.id).join(',')
							that.getDeleteHistory(id)
							that.showDeleteIcon = true
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
				});
			},
			async handleInput(e) {
				this.inputValue = e.detail.value
				if(e.detail.value.length > 0) {
					this.showClearIcon = true
				} else {
					this.showClearIcon = false
				}
				const { data } = await searchWords(this.inputValue)
				this.newWordList = data
			},
			handleFocus() {
				this.showHistory = false
			},
			goToPage(url) {
				uni.navigateTo({
					url
				})
			},
			async historyWord() {
				const { data } = await searchHistory()
				this.historyWordList = data
			},
			clearIcon() {
				this.inputValue = '';
				this.showClearIcon = false;
				this.showHistory = true
			},
			deleteIcon(id) {
				this.getDeleteHistory(id)
			},
			async getDeleteHistory(id) {
				const { data } = await deleteHistory(id)
				this.historyWord()
			}
		}
	}
</script>

<style lang="scss" scoped>
.search_box {
	height: 100vh;
	background: $uni-bg-color-page;
	
	.search {
		width: 100%;
		height: 104rpx;
		padding: 20rpx 30rpx;
		color: $uni-text-color-placeholder;
		border-radius: 50rpx;
		
		.placeholder {
			width: 80%;
			font-size: 28rpx;
		}
		
		.search_input {
			// width: calc(100% - 128rpx);
			width: 100%;
			height: 100%;
			padding: 0 30rpx;
			background-color: #c5dbfd;
			border-radius: 50rpx;
		}
	}

	.history {
		height: calc(100% - 104rpx);
		
		.title {
			height: 64rpx;
			padding: 0 30rpx;
			margin-bottom: 30rpx;
			
			text {
				font-size: 28rpx;
				color: $uni-text-color-placeholder;
			}
		}
		
		.history_word, .new_word {
			flex-wrap: wrap;
			padding: 0 30rpx;
			
			.item_his {
				width: calc(50% - 30rpx);
				margin: 0 30rpx 20rpx 0;
				font-size: 28rpx;
				color: $uni-text-color;
				position: relative;
				
				&:nth-child(2n) {
					margin-right: 0;
				}
				
				.del_icon {
					position: absolute;
					top: 50%;
					right: 10rpx;
					transform: translateY(-50%);
				}
			}
			
			.item_search, {
				font-size: 28rpx;
				border-bottom: 2rpx solid $uni-border-bottom-color;
				padding: 20rpx 0;
				
				.title1 { 
					color: $uni-text-color;
					width: 36%;
				}
				
				.title2 {
					color: $uni-text-color-placeholder;
					width: 64%;
					height: 40rpx;
					text-align: right;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis; 
				}
			}
		}
	}
}
</style>
